<template>
  <h2>当前求和为：{{sum}}</h2>
  <button @click="sum++">点我+1</button>
  <hr>
  <h2>当前的信息：{{msg}}</h2>
  <button @click="msg=msg+'12'">修改msg</button>
  <hr>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>薪水：{{person.job.j.sa}}k</h2>
  <button @click="person.name+='qwe'">增长姓名</button><hr>
  <button @click="person.age+=1">增长年龄</button><hr>
  <button @click="person.job.j.sa++">涨薪</button>
</template>

<script>
    import {reactive, ref,watch} from 'vue'
    export default {
        name: "Demo",
        setup(){
            let sum = ref(666)
            let msg = ref('qwe')
            let person =ref({
                name:'张三',
                age:18,
                job:{
                    j:{
                        sa:20
                    }
                }
            })

            watch(sum,(newValue,oldValue)=>{
                console.log('sum的值发生变化了',newValue,oldValue);
            })

            watch(person,(newValue,oldValue)=>{
                console.log('person中的属性发生变化了',newValue,oldValue);
            },{deep:true})

            //返回一个对象
            return {
                sum,
                msg,
                person
            }
        }
    }
</script>